<template>
  <van-tabbar v-model="active" route z-index="5" class="tabs">
    <template v-for="(tab, index) in tabs" :key="index">
      <van-tabbar-item :to="tab.path">
        <span>{{ tab.text }}</span>
        <template #icon="props">
          <img :src="props.active ? tab.active : tab.inactive" />
        </template>
      </van-tabbar-item>
    </template>
  </van-tabbar>
</template>

<script setup>
import ICON_Index from '@/asset/images/tabs/index.png'
import ICON_Index_active from '@/asset/images/tabs/index-active.png'

import ICON_List from '@/asset/images/tabs/list.png'
import ICON_List_active from '@/asset/images/tabs/list-active.png'

import ICON_Mine from '@/asset/images/tabs/mine.png'
import ICON_Mine_active from '@/asset/images/tabs/mine-active.png'

import ICON_Transfer from '@/asset/images/tabs/tab_transfer_default.png'
import ICON_Transfer_active from '@/asset/images/tabs/tab_transfer_active.png'

const tabs = [
  {
    text: '推荐',
    active: ICON_Index_active,
    inactive: ICON_Index,
    path: '/',
  },
  {
    text: '分类',
    active: ICON_List_active,
    inactive: ICON_List,
    path: '/category',
  },
  {
    text: '转票',
    active: ICON_Transfer_active,
    inactive: ICON_Transfer,
    path: '/transfer',
  },
  {
    text: '我的',
    active: ICON_Mine_active,
    inactive: ICON_Mine,
    path: '/mine',
  },
]
</script>

<style lang="scss" scoped>
.tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}
</style>
